jQuery 強大的選取器（二）

js忍之道 js原創

zivhsiao 2012-04-11 08:49:15 ‧ 16858 瀏覽

分享至

jQuery 基本的filter介紹
繼前面基本的selector之後，這次介紹的是Filters
在處理HTML Elements常常需要針對重複元素中的某些元素處理，就可以使用filters

以下就範例進行說明

Base Filters : (First / Last / not)
:first 符合某定義下的第一個內容
$(‘tr:first’) : 第一個tr
$(‘td:first’) : 第一個td
:last 符合某定義下的最後一個內容
$(‘tr:last) : 第一個tr
$(‘td:last’) : 第一個td
Not
$(‘tr:not(:first)’) : 除了第一個tr以外的所有tr

範例:

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:first').removeClass();
					$('tr:first').addClass('first');
				});
				$('#btn2').click(function(){
					$('td:first').removeClass();
					$('td:first').addClass('first');
				});
				$('#btn3').click(function(){
					$('tr:last').removeClass();
					$('tr:last').addClass('last');
				});
				$('#btn4').click(function(){
					$('td:last').removeClass();
					$('td:last').addClass('last');
				});
				$('#btn5').click(function(){
					$('tr:not(:first)').removeClass();
					$('tr:not(:first)').addClass('first');
				});
			})
		</Script>
		<style type="text/css">
			.first
			{
				background-Color:blue;
				color:yellow;
			}
			.last
			{
				background-Color:yellow;
				color:blue;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="´ú¸ÕFirst Tr">
		<br />
		<input type="Button" id="btn2" name="btn2" value="´ú¸ÕFirst Td">
		<br />
		<input type="Button" id="btn3" name="btn3" value="´ú¸ÕLast Tr">
		<br />
		<input type="Button" id="btn4" name="btn4" value="´ú¸ÕLast Td">
		<br />
		<input type="Button" id="btn5" name="btn5" value="´ú¸ÕNot First Tr">
		<br />
		<hr />
		<table border="1">
			<tr>
				<td>1,1</td>
				<td>2,1</td>
				<td>3,1</td>
				<td>4,1</td>
				<td>5,1</td>
			</tr>
			<tr>
				<td>1,2</td>
				<td>2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
			</tr>
			<tr>
				<td>1,3</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
			</tr>
		</table>
	</BODY>
</HTML>

Basic Filter : ( even / odd /eq )

Even : 某物件的偶數
$(tr : even).addClass(‘myEven’);
$(tr : odd).addClass(‘myOdd’);
$(tr : eq(1).addClass(‘myEq’);

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:even').removeClass();
					$('tr:even').addClass('myEven');
				});
				$('#btn2').click(function(){
					$('tr:odd').removeClass();
					$('tr:odd').addClass('myOdd');
				});
				$('#btn3').click(function(){
					$('tr:eq(1)').removeClass();
					$('tr:eq(1)').addClass('myEq');
				});
				$('#btn4').click(function(){
					$('#tbd tr:even').removeClass();
					$('#tbd tr:even').addClass('myEven');
				});
			})
		</Script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="´ú¸ÕEven">
		<br />
		<input type="Button" id="btn2" name="btn2" value="´ú¸ÕOdd">
		<br />
		<input type="Button" id="btn3" name="btn3" value="´ú¸Õeq">
		<br />
		<input type="Button" id="btn4" name="btn4" value="´ú¸Õtbody¤ºªºtr">
		<br />
		<hr />
		<table border="1">
			<thead>
				<tr>
					<th>1,0</th>
					<th>2,0</th>
					<th>3,0</th>
					<th>4,0</th>
					<th>5,0</th>
				</tr>
			</thead>
			<tbody id="tbd">
				<tr>
					<td>1,1</td>
					<td>2,1</td>
					<td>3,1</td>
					<td>4,1</td>
					<td>5,1</td>
				</tr>
				<tr>
					<td>1,2</td>
					<td>2,2</td>
					<td>3,2</td>
					<td>4,2</td>
					<td>5,2</td>
				</tr>
				<tr>
					<td>1,3</td>
					<td>2,3</td>
					<td>3,3</td>
					<td>4,3</td>
					<td>5,3</td>
				</tr>
				<tr>
					<td>1,4</td>
					<td>2,4</td>
					<td>3,4</td>
					<td>4,4</td>
					<td>5,4</td>
				</tr>
			</tbody>
		</table>
	</BODY>
</HTML>

Content Filter : contains / has /empty
$(‘tr:contains(“BB”)’) : tr裡面有包含到BB這個字串的
$(‘tr :not(:has(th)))：tr 裡面不包含th的
Contains:字串 v.s. has:控制項
$(‘td:empty).html(‘N/A’);’
Visibility Filters (hidden / visible)

Hidden : 目前隱藏沒有顯示的
$(‘tr:hidden’).fadeIn(‘slow’);
Visible : 目前有顯示的
$(‘tr:visible’).hide(‘slow’);

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$('tr:hidden').fadeIn('slow');
				});
				$('#btn2').click(function(){
					$('tr:visible').hide('slow');
				});
				$('#btn3').click(function(){
					$('#img1').fadeIn('slow');
				});
			})
		</Script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="顯示所有隱藏">
		<br />
		<input type="Button" id="btn2" name="btn2" value="隱藏所有">
		<br />
		<input type="Button" id="btn3" name="btn3" value="顯示圖">
		<br />
		<hr />
		<table border="1">
			<tr>
				<td>1,1</td>
				<td>2,1</td>
				<td>3,1</td>
				<td>4,1</td>
				<td>5,1</td>
			</tr>
			<tr style="display:none">
				<td>1,2</td>
				<td>2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
			</tr>
			<tr>
				<td>1,3</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
			</tr>
			<tr>
				<td>1,4</td>
				<td>2,4</td>
				<td>3,4</td>
				<td>4,4</td>
				<td>5,4</td>
			</tr>
		</table>
		<img id="img1" src="topcat.jpg" alt="topcat" style="display:none" />
	</BODY>
</HTML>

Attribute Filters
[attribute = value]
$(‘td[class=“test”]’) : class是test的td
^= : 什麼字串開頭的
$(‘a[href^=“y”]’) 超鏈結，網址是y開頭的
$=：什麼字串結尾的
$(a[href$=‘.com’)])
*=：含有某字串的
$(‘a[href*=“y”]’)

範例：

<HTML>
	<HEAD>
		<Script Type="text/javascript" src="js/jQuery.js"></Script>
		<Script Type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					var std=$("td[class='test']");
					alert(std.html());
					std.removeClass();
					std.addClass('myEq');
				});
				$('#btn2').click(function(){
					$('a[href^="t"]').addClass('myEven');
				});
				$('#btn3').click(function(){
					$('a[href$=".com"]').addClass('myEven');
				});
				$('#btn4').click(function(){
					$('a[href*=".com"]').addClass('myEven');
				});
			})
		</Script>
		<style type="text/css">
			.myOdd
			{
				background-Color:pink;
			}
			.myEven
			{
				background-Color:Yellow;
			}
			.myEq
			{
				background-Color:green;
			}
		</style>
	</HEAD>
	<BODY>
		<input type="Button" id="btn1" name="btn1" value="找td的Class=test的"><br />
		<input type="Button" id="btn2" name="btn2" value="找t開頭的連結"><br />
		<input type="Button" id="btn3" name="btn3" value="找.com結尾的連結"><br />
		<input type="Button" id="btn4" name="btn4" value="有.com的連結"><br />
		<hr />
		<table border="1">
			<tr>
				<td>1,1</td>
				<td>2,1</td>
				<td>3,1</td>
				<td>4,1</td>
				<td>5,1</td>
			</tr>
			<tr>
				<td>1,2</td>
				<td class="test">2,2</td>
				<td>3,2</td>
				<td>4,2</td>
				<td>5,2</td>
			</tr>
			<tr>
				<td>1,3</td>
				<td>2,3</td>
				<td>3,3</td>
				<td>4,3</td>
				<td>5,3</td>
			</tr>
			<tr>
				<td>1,4</td>
				<td>2,4</td>
				<td>3,4</td>
				<td>4,4</td>
				<td>5,4</td>
			</tr>
		</table>
		<a href="tw.yahoo.com" target="_blank">tw.yahoo.com</a><br />
		<a href="panasonic.com.tw" target="_blank">panasonic.com.tw</a><br />
		<a href="www.google.com" target="_blank">www.google.com</a><br />
	</BODY>
</HTML>